import { PureComponent } from 'react';
import { isNull } from '../../utils/request';
import { calcField, filterTemplate } from '../../utils/helper';
import MAction from '../MAction/MAction';
import moment from "moment";
import QRCode from "qrcode.react";
import { Button } from 'antd-mobile';
interface Props {
  list: any,
  type?: any,
  dataset_key?: string,
  config?: {
    [k: string]: any
  },
  template?: string,
  componentStyle?: object,
  event_key?: string,
  count_down_sec?: any,//倒计时秒数
  count_down_style?: any,//倒计时外部样式
}
interface State {
  [k: string]: any
}
export default class MiQrcode extends PureComponent<Props, State> {
  timer: any = null;
  constructor(props) {
    super(props);
    this.state = {
      startTime: moment(),//倒计时开始时间
      currentTime: moment(),//当前时间
    }
  }
  componentWillMount() {
    let { count_down_sec } = this.props;
    if (count_down_sec > 0) {
      this.timer = setInterval(() => {
        this.setState({
          currentTime: moment()
        })
      }, 1000)
    }
  }

  render() {
    let { type, dataset_key, list, config = {}, componentStyle, formData, url, size, color, footer, title, count_down_sec, count_down_style, hide_border, count_down_left, count_down_right} = this.props;
    if (!isNull(dataset_key) && list instanceof Array) {
      return null;
    }

    list = {
      ...formData,
      ...list
    }
    if (!isNull(url)) {
      let showShixiaoImg=false;
      let { currentTime, startTime } = this.state;
      let str = [];
      color = filterTemplate(color, list);
      if (isNull(color)) {
        color = "#000"
      }
      if (count_down_sec > 0) {
        let diff = count_down_sec - currentTime.diff(startTime, "seconds");//距倒计时结束还有多少秒
        if (diff <= 0) {
          color = "#cccccc";
          clearInterval(this.timer);
          showShixiaoImg=true;
          str.push(
            <div data-flex='cross:center main:center'>
              <div>
                已失效
             </div>
              <Button size="small" style={{ marginLeft: "5px" }} onClick={() => {
                window.location.reload();
              }}>刷新</Button>
            </div>
          );
        }
        else {
          let hour = Math.floor(diff / 3600);
          let min = Math.floor((diff % 3600) / 60);
          let sec = diff % 60;
          if (!isNull(count_down_left)) {
            str.push(
              <span dangerouslySetInnerHTML={{__html:count_down_left}}></span>
            )
          }
          if (hour > 0) {
            str.push(
              <span style={{ color: "#000",...count_down_style }}> 时{hour} </span>
            )
          }
          if (min > 0) {
            str.push(
              <span style={{ color: "#000",...count_down_style }}> {min} 分</span>
            )
          }
          if (sec > 0) {
            str.push(
              <span style={{ color: "#000",...count_down_style }}> {sec} 秒</span>
            )
          }
          if (!isNull(count_down_right)) {
            str.push(
              <span dangerouslySetInnerHTML={{__html:count_down_right}}></span>
            )
          }
        }
      }
      url = filterTemplate(url, list);
      if (url.indexOf("http") != 0 && url.indexOf("https") != 0) {
        if (url.substring(0, 1) == "/") {
          url = location.origin + "/#" + url;
        }
        else {
          url = location.origin + "/#/" + url;
        }
      }
      if (!isNull(footer)) {
        footer = filterTemplate(footer, list)
      }
      if (!isNull(title)) {
        title = filterTemplate(title, list)
      }
      let qrStyle: any = {
        border: "2px solid " + color, padding: "10px"
      };
      if (hide_border == 1) {
        qrStyle = {}
      }
      return (
        <div style={{ textAlign: "center", ...componentStyle }}>
          {title && <div dangerouslySetInnerHTML={{ __html: title }}></div>}
          {
            showShixiaoImg ? <img src={"image/shixiao.jpeg"} style={{width:size+"px"}} alt=""/> : <QRCode
            style={qrStyle}
            size={size}
            value={url}
            fgColor={color}
          />
          }
         
          {footer && <div dangerouslySetInnerHTML={{ __html: footer }}></div>}
          {
            count_down_sec > 0 && <div style={{ marginTop: "10px", textAlign: "center", fontSize: "20px" }} >
              {str}
            </div>
          }
        </div>

      )
    }
    return null;
  }
}